<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Basic input box (e.g. name field)</h2>
    <mat-form-field floatLabel="never">
      <mat-label>First name</mat-label>
      <input matInput [(ngModel)]="firstName">
    </mat-form-field>
    <mat-form-field floatLabel="never">
      <mat-label>Last name</mat-label>
      <input matInput [(ngModel)]="lastName">
    </mat-form-field>
  </section>

  <section>
    <h2>Input with hint (e.g. password field)</h2>
    <mat-form-field hideRequiredMarker>
      <mat-label>Password</mat-label>
      <input matInput [type]="passwordType" [(ngModel)]="password" required
             #passwordModel="ngModel">
      <button mat-icon-button matSuffix [attr.aria-label]="passwordToggleLabel"
              (click)="showPassword = !showPassword">
        <mat-icon>{{passwordToggleIcon}}</mat-icon>
      </button>
      <mat-hint>Hint: favorite color</mat-hint>
      <mat-error *ngIf="passwordModel.hasError('required')">You must enter your password.
      </mat-error>
    </mat-form-field>
  </section>

  <section>
    <h2>Input with error message (e.g. email field)</h2>
    <mat-form-field>
      <mat-label>Email</mat-label>
      <input matInput type="email" [(ngModel)]="email" required email #emailModel="ngModel">
      <mat-error *ngIf="emailModel.hasError('required')">You must enter your email.</mat-error>
      <mat-error *ngIf="emailModel.hasError('email')">Not a valid email address.</mat-error>
    </mat-form-field>
  </section>

  <section>
    <h2>Input with prefix & suffix (e.g. currency converter)</h2>
    <mat-form-field floatLabel="always">
      <mat-label>USD</mat-label>
      <input matInput type="number" [(ngModel)]="usd">
      <span matPrefix>$</span>
    </mat-form-field>
    =
    <mat-form-field floatLabel="always">
      <mat-label>JPY</mat-label>
      <input matInput type="number" [(ngModel)]="jpy">
      <span matPrefix>‎¥‎</span>
    </mat-form-field>
    (as of 7/31/2017)
  </section>

  <section>
    <h2>Textarea input (e.g. comment box)</h2>
    <mat-form-field>
      <textarea matInput aria-label="Comment" [(ngModel)]="comment" cdkTextareaAutosize
                [maxlength]="commentMax" #commentModel="ngModel"></textarea>
      <mat-hint>Leave us a comment!</mat-hint>
      <mat-hint align="end">{{commentCount}}/{{commentMax}}</mat-hint>
    </mat-form-field>
  </section>
</mat-card>